<template>
    <ul class="cartList">
          <li class="cartList__item">
            <div class="cartList__item__shop">
                <h3 class="cartList__item__shop__tlite">{{shopName}}</h3>
                <template v-for="items in productList" :key="items._id">
                    <div class="cartList__item__shop__productBox">
                        <div class="cartList__item__shop__productBox__left">
                            <img
                            :src="items.imgUrl"
                            alt="jpg"
                            class="cartList__item__shop__productBox__left__img"
                            >
                            <div class="cartList__item__shop__productBox__left__text">
                                <div class="cartList__item__shop__productBox__left__text__name">{{items.name}}</div>
                                <div class="cartList__item__shop__productBox__left__text__count"><span>&yen;</span>{{`${items.price}  x  ${items.count}`}}</div>
                            </div>
                        </div>
                        <div class="cartList__item__shop__productBox__price"><span>&yen;</span>{{(items.price * items.count).toFixed(2)}}</div>
                    </div>
                </template>
            </div>
        </li>
    </ul>
</template>

<script>
import { useCommonCartEffect } from '../../../effects/cartEffects'
import { useStore } from 'vuex'
import { toRefs } from 'vue'
export default {
  name: 'OrderList',
  props: ['shopId'],
  setup (props) {
    const store = useStore()
    const { shopId } = toRefs(props)
    const { shopName } = toRefs(store.state.cartList[shopId.value])
    const { productList } = useCommonCartEffect(shopId.value)
    return { productList, shopName }
  }
}
</script>

<style lang="scss">
@import '../../../style/colorValue.scss';
@import '../../../style/mixinApi.scss';

.cartList__item {
margin:0 .18rem .16rem .18rem;
background: $whiteColor;
border-radius: .04rem;
&__shop {
    padding:.16rem;
    &__tlite {
    margin:0;
    font-size: .16rem;
    color: $TextColor;
    padding-bottom: .16rem;
    }
    &__productBox {
    display: flex;
    padding-bottom: .16rem;
    justify-content: space-between;
    &__left {
        display: flex;
        &__text {
        padding-left: .16rem;
        font-size: .14rem;
        &__name {
            width: 1.1rem;
            padding-bottom: .06rem;
            color: $TextColor;
            font-weight:bold;
            line-height: .2rem;
            @include hidText()
        }
        &__count {
            color: $redColor;
            line-height: .2rem;
            span {
            font-size: .2rem;
            display: inline-block;
            transform: scale(.5);
            position: relative;
            top: .04rem;
            }
        }
        }
    }
    &__price {
        display: flex;
        align-items: flex-end;
        font-size: .14rem;
        color: $blackColor;
        line-height: .2rem;
        span {
        font-size: .2rem;
        transform: scale(.5);
        line-height: .17rem;
        color: $blackColor;
        }
    }
    }
}
}
.cartList__item__shop__productBox__left__img {
width: .46rem;
height: .46rem;
}
</style>
